<script setup lang="ts">
import { computed, ref, toRefs } from 'vue'
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import _ from 'lodash'
import pdf from '@/assets/image/pdf.png'
const props = defineProps({
  orderDetail: Object
})
const { orderDetail } = toRefs(props)

/**
 * 自定义字段渲染结构，为了方便更改样式
 */
const customFieldRender = ref({
  txt: [],
  rate: [],
  file: [],
})

/**
 * 工单图片容器div
 */
const orderImgListContentRef = ref<HTMLDivElement | null>(null)
const orderImgActiveArrow = ref<'right' | 'left'>('right')
const onOrderImgArrowClick = (type: 'right' | 'left') => {
  if (orderImgListContentRef.value) {
    if (type === 'right') {
      orderImgActiveArrow.value = 'left'
      orderImgListContentRef.value.style.transform = `translateX(-100%)`
    } else {
      orderImgActiveArrow.value = 'right'
      orderImgListContentRef.value.style.transform = `translateX(0)`
    }
  }
}
</script>

<template>
  <div>
    <div class="order_detail_order_info">
      <div class="title">工单信息</div>
      <div class="info_list">
        <div class="text">
          <div class="info_item">
            <div class="label">
              <div class="txt">报单时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.orderCreateTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">工单来源</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.source }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">创建人</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.createEmp }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">工单类型</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.orderType || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">公司故障描述</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.faultDesc || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">公司现象序列号</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.faultPhenomenonCode" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">故障现象</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.faultPhenomenon" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">故障原因序列号</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.faultReasonCode" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">故障原因</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.faultReason" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">维修措施</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.maintenanceMeasures" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">调度状态</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.dispatchStatus" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">调度人</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.dispatchEmp" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">远程公里数</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.remoteMileage }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">远程费</div>
              <div class="middle">:</div>
            </div>
            <div class="value">￥{{ Number(orderDetail.remoteFee).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">物料申请金额</div>
              <div class="middle">:</div>
            </div>
            <div class="value">￥{{ Number(orderDetail.applySpareFee).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">物料核准金额</div>
              <div class="middle">:</div>
            </div>
            <div class="value">￥{{ Number(orderDetail.spareApprovalFee).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">单价</div>
              <div class="middle">:</div>
            </div>
            <div class="value">￥{{ Number(orderDetail.price).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">承接时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.undertakingTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">是否确认接单</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.sureReceivingOrder }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">确认接单时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.sureReceivingOrdersTime }}</div>
          </div>

          <div class="info_item">
            <div class="label">
              <div class="txt">预约人</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.reservationEmp" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">首次预约时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.firstReservationTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">首次预约操作时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.firstReservationOperateTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">预约时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.reservationTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">预约操作时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.reservationOperateTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">完工时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.endOrderTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">第一次完工时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.firstEndOrderTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">完工类型</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.endOrderType" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">完工备注</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.endOrderRemark" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">完工确认人</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.endOrderSureEmp }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">完工确认时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.endOrderSureTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">完工序列号</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.endOrderBarcode }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">取消人</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.cancelEmp }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">取消时间</div>
              <div class="middle">:</div>
            </div>
            <div class="value">{{ orderDetail.cancelTime }}</div>
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">取消备注</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.cancelRemark" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">外部系统传单标识</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.outSystemOrderNo || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">外部系统传单返回信息</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.outSystemOrderReturnInfo || ''"
              text-align="left" :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">工单备注</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.orderRemark || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">旺旺号</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.wangwangNumber || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">是否核销</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.writeOff || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">录单序列号</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.recordBarcode || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>

          <div class="info_item">
            <div class="label">
              <div class="txt">审核不通过原因</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.checkNotPassReason || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">最新跟进时间</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.lastFollowUpTime || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">回访满意度</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.followUpSatisfactionLevel || ''"
              text-align="left" :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">中心审核时间</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.centerCheckTime || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">简易回访状态</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.simpleFollowUpStatus || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">简易总体满意情况</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.simpleOverallSatisfactionLevel || ''"
              text-align="left" :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">简易回访情况</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.simpleOverallSatisfaction || ''"
              text-align="left" :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">简易回访失败原因</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.simpleFollowUpFailReason || ''"
              text-align="left" :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">简易回访时间</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.simpleFollowUpTime || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
          <div class="info_item">
            <div class="label">
              <div class="txt">简易回访备注</div>
              <div class="middle">:</div>
            </div>
            <h-tooltip-text :max-width="160" :height="18" :text="orderDetail.simpleFollowUpRemark || ''" text-align="left"
              :tooltip-content-max-width="360" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import './OrderInfo.scss';
</style>
